<template>
  <view class="container">
    <!-- #ifdef APP -->
    <view style="margin-top: 44px;"></view>
    <!-- #endif -->
    <view class="top-nav">
      <view class="top-nav-left" @click="goBack">
        <uni-icons type="left" size="24"></uni-icons>
      </view>
      <view class="top-nav-center">
        <text>邀请好友</text>
      </view>
      <view class="top-nav-right">
      </view>
    </view>
    <view class="top-title">
			邀请好友
    </view>
    <!-- dataInfo：滚动卡片数据  swiperIndex：滚动序列 @change：滚动事件-->
    <ccScroolCard :dataInfo="banner" :swiperIndex="swiperIndex" @change="swiperChangeClick"
                   @imgCanvas="imgCanvas"></ccScroolCard>
    <view style="height: 400rpx"></view>

    <qiqb-share :data="banner" :canvasImg="canvasImg" ref="share" @down="down"></qiqb-share>
  </view>
</template>

<script setup>
 import ccScroolCard from "@/uni_modules/cc-scroolCard/components/cc-scroolCard/cc-scroolCard.vue";
 import qiqbShare from "@/components/qiqb-share/qiqb-share.vue";

import {
  onLoad,
  onShow
} from '@dcloudio/uni-app';
import {
  ref,
  reactive,
  getCurrentInstance
} from "vue";

const share = ref(null)
const banner = reactive({
  headImgs: [],
  share: "",
  user_id: '',
})
let canvasImg = ref('')
const data = reactive({
  userInfo: {},
})
const swiperIndex = ref(0)

const swiperChangeClick = (e) => {
  swiperIndex.value = e.detail.current
  console.log("swiperChangeClick", swiperIndex.value)
}

const imgCanvas = (e) => {
  console.log("imgCanvas", e)
  if (e) {
    canvasImg.value = e
  }
}
const down = (e) => {
  console.log("down", e)
}


onLoad(() => {
  getData()
})
const {
  proxy
} = getCurrentInstance();
const {
  appContext,
} = getCurrentInstance();

onShow(() => {

  data.userInfo = uni.getStorageSync('userInfo')
  banner.share = `${proxy.$share}pages/login/register/?share=${data.userInfo.user_id}`
  banner.user_id = data.userInfo.user_id
});

function goBack() {
uni.navigateBack()
}
//获取装修数据
function getData() {
  proxy.$request({
    url: 'api/decoration/?code=2',
    method: 'get',
    success: res => {
      // console.log('resgetData',res)
      const explain = JSON.parse(res.data.explain)
      // console.log("resgetData explain", explain)
      banner.headImgs = []
      banner.headImgs = explain[0].data
      explain[0].data.forEach((item, index) => {
        console.log("item", item)
        banner.headImgs[index].img = item.url
        banner.headImgs[index].top = item.top
        banner.headImgs[index].left = item.left
        banner.headImgs[index].size = item.size||item.box||150

      })
      // console.log("resgetData explain", explain)
      // console.log("banner", banner.headImgs)
    }
  })
}

function copyshare() {
  uni.setClipboardData({
    data: data.code, //要被复制的内容
    success: e => {
      uni.showToast({
        title: '复制成功',
        duration: 2000,
        icon: 'none'
      });
    },
    fail: err => {
      uni.showToast({
        title: '复制失败',
        duration: 2000,
        icon: 'none'
      });
    }
  });
}

function capture() {
  // #ifdef APP-PLUS
  uni.saveImageToPhotosAlbum({
    filePath: data.code,
    success() {
      uni.showToast({
        position: "center",
        icon: "none",
        title: "图片保存成功，请到手机相册查看"
      })
    },
    fail(e) {
      uni.showModal({
        content: "保存相册失败，errCode：" + e.errCode + "，errMsg：" + e.errMsg +
            "，errSubject：" + e
                .errSubject,
        showCancel: false
      });
    }
  })
  // #endif
  // #ifndef APP-PLUS
  savePicture(data.code)
  // #endif
}

function savePicture(base64) {
  var arr = base64.split(',');
  var bytes = atob(arr[1]);
  let ab = new ArrayBuffer(bytes.length);
  let ia = new Uint8Array(ab);
  for (let i = 0; i < bytes.length; i++) {
    ia[i] = bytes.charCodeAt(i);
  }
  var blob = new Blob([ab], {
    type: 'application/octet-stream'
  });
  var url = URL.createObjectURL(blob);
  var a = document.createElement('a');
  a.href = url;
  a.download = new Date().valueOf() + ".png";
  var e = document.createEvent('MouseEvents');
  e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
  a.dispatchEvent(e);
  URL.revokeObjectURL(url);
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  min-height: 100vh;
  position: relative;
  background-image: url('https://pili-vod.guanxikeji.com/hongyunshangcheng/img/1745307443595.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  box-sizing: border-box;

  .top-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 88rpx;
    padding: 0 30rpx;
    box-sizing: border-box;
    background-color: transparent;

    .top-nav-left {
      width: 88rpx;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      font-size: 20px;
      color: #333333;
    }

    .top-nav-center {
      font-size: 18px;
      color: #333333;
      font-weight: 600;
    }
    .top-nav-right {
      width: 88rpx;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      font-size: 20px;
      color: #333333;
    }
  }

  .top-title {
    width: 90%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    font-size: 14px;
    color: #00aa00;
    font-weight: 500;
    background-color: #fffcf4;
    margin: 30upx auto;
    border-radius: 10px;
  }

}
</style>
